<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <!-- 搜索框 -->
          <div class="search" style="float: right; padding: 3px 0; width: 500px;">
            <el-input placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" />
            </el-input>
          </div>
          <!-- 新增按钮 -->
          <el-button type="primary" @click="addBtn">新增经纪</el-button>
        </div>
        <div>
          <el-table border :data="jingjiList">
            <el-table-column label="图片" sortable="" width="110px">
              <template v-slot="obj">
                <img class="avatar" :src="obj.row.image" alt="">
              </template>
            </el-table-column>
            <el-table-column label="名称" sortable="" width="110px" prop="name" />
            <el-table-column label="邮箱" sortable="" prop="email" />
            <el-table-column label="电话" sortable="" prop="phone" />
            <el-table-column label="地址" sortable="" prop="address" />
            <el-table-column label="介绍" sortable="" prop="desc" />
            <el-table-column prop="" label="操作" sortable="" fixed="right" width="280">
              <template v-slot="obj">
                <el-button type="primary" @click="editorBtn(obj.row.id)">编辑</el-button>
                <el-button type="danger" @click="delBtn(obj.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row :data="jingjiList" type="flex" justify="center" align="middle" style="height: 60px">
            <el-pagination
              :total="total"
              :page-size="pageConfig._limit"
              layout="prev, pager, next"
              @current-change="pageChange"
            />
          </el-row>
        </div>
      </el-card>
      <!-- 弹窗 -->
      <el-dialog :title="bjData.id?'编辑经纪':'新增经纪'" :visible="isShowDialog" @close="btnCancel">
        <el-form ref="permForm" :model="bjData" :rules="rules" label-width="88px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="bjData.name" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="bjData.email" />
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="bjData.phone" />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="bjData.address" />
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input v-model="bjData.desc" />
          </el-form-item>
          <el-form-item label="封面" prop="image">
            <imageUpload ref="imageUpload" />
          </el-form-item>
        </el-form>

        <template #footer>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { delJingji, addJingji, jingji, getJingjiDetail, jingjiTotal, getJingjiEditor } from '@/api/jingji'
import imageUpload from '@/components/ImageUpLoad'
export default {
  components: {
    imageUpload
  },
  data() {
    return {
      jingjiList: [],
      isShowDialog: false,
      bianji: {},
      bjData: {},
      rules: {},
      total: 0,
      totalData: {},
      pageConfig: {
        _limit: 3,
        _start: 0
      }
    }
  },
  async created() {
    // 获取总数据数量
    this.totalData = await jingjiTotal()
    this.total = this.totalData.data
    this.load()
  },
  methods: {
    // 新增按钮
    addBtn() {
      this.isShowDialog = true
    },
    async load() {
      // 通过异步获取列表
      const res = await jingji(this.pageConfig)
      console.log(res)
      this.jingjiList = res.data
    },
    pageChange(newPage) {
      this.pageConfig._start = (newPage - 1) * this.pageConfig._limit
      this.load()
    },
    // 编辑按钮
    async editorBtn(id) {
      console.log(id)
      // 数据回显
      this.bianji = await getJingjiDetail(id)
      this.bjData = this.bianji.data
      console.log(this.bjData)
      this.isShowDialog = true
    },
    // 删除按钮
    async delBtn(id) {
      try {
        // 二次询问
        await this.$confirm('是否删除')
        // 发请求
        await delJingji(id)
        // 提示用户
        this.$message.success('操作成功')
        // 页面重新加载
        this.load()
      } catch (error) {
        console.log(error)
      }
      console.log(id)
      // 二次确认
      // 发送请求
      // 提示用户
      // 更新页面
    },
    // 弹窗确认按钮
    async btnOK() {
      // 校验表单
      await this.$refs.permForm.validate()
      // 发送请求
      if (this.bjData.id) {
        await getJingjiEditor(this.bjData)
      } else {
        console.log(this.bjData)
        await addJingji(this.bjData)
      }
      // 关闭弹窗
      this.isShowDialog = false
      // 提醒用户
      this.$message.success('操作成功')
      // 更新页面
      this.load()
    },
    // 弹窗取消按钮
    btnCancel() {
      // 清理数据
      this.$refs.permForm.resetFields()
      this.bjData = {
        name: '',
        phone: '',
        email: '',
        desc: '',
        address: '',
        image: ''
      }
      // 关闭弹窗
      this.isShowDialog = false
    }

  }
}
</script>

<style scoped>
.avatar {
  width: 88px;
  height: 88px;
  object-fit: contain;
}
</style>
